<template>
  <div
    class="icon-boxs"
    :class="{
      'icon-boxs1': store.styleInfo.colorType == 1,
      'icon-boxs2': store.styleInfo.colorType == 2,
      'icon-boxs3': store.styleInfo.colorType == 3,
    }"
  >
    <i
      v-if="store.styleInfo.styleType == 1"
      class="iconfonts"
      :style="{
        lineHeight: '32px',
        fontSize: props.iconSize,
        color: props.color ? props.color : colorList5[store.styleInfo.colorType - 1].buttonColor,
      }"
    >
      &#xe659;
    </i>
    <i
      v-if="store.styleInfo.styleType == 2"
      class="iconfonts"
      :style="{
        lineHeight: '32px',
        fontSize: props.iconSize,
        color: props.color ? props.color : colorList5[store.styleInfo.colorType - 1].buttonColor,
      }"
    >
      &#xe65f;
    </i>
    <i
      v-if="store.styleInfo.styleType == 3"
      class="iconfonts"
      :style="{
        lineHeight: '32px',
        fontSize: props.iconSize,
        color: props.color ? props.color : colorList5[store.styleInfo.colorType - 1].buttonColor,
      }"
    >
      &#xe662;
    </i>
  </div>
</template>

<script setup lang="ts">
import { colorList5 } from '../../data';
import { useProjectStore } from '@/store';
const store = useProjectStore();

const props = defineProps({
  iconSize: {
    type: String,
    default: '22px',
  },
  color: {
    type: String,
  },
  // 数据
});
</script>

<style lang="less" scoped>
.icon-boxs {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  // background: linear-gradient(
  //   90deg,
  //   rgba(255, 255, 255, 0) 0%,
  //   rgba(255, 255, 255, 0.1) 54%,
  //   rgba(255, 255, 255, 0) 100%
  // );
  // -webkit-background-clip: text;
  // -webkit-text-fill-color: transparent;
}
.icon-boxs1 {
  background: linear-gradient(to right, #e9d5b0 0%, rgb(102, 41, 36, 0) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.icon-boxs2 {
  background: linear-gradient(to right, #cbb995 0%, rgba(68, 60, 46, 0) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.icon-boxs3 {
  background: linear-gradient(to right, #e9d5b0 0%, rgba(203, 185, 149, 0) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.iconfonts {
  font-weight: 400;
}
</style>
